<template>
  <div class="article">
    <template v-if="info['content']&&info['content'].length>0">
      <h4>{{info['title']}}（共{{info['issue']}}期）</h4>
      <div class="content">
        <div class="logo">
          <img :src="info['logo']" alt="">
          <!-- <img src="@/assets/img/report/u3712.png" alt=""> -->
        </div>
        <ul class="info-box">
          <li v-for="(citem, index2) in info['content']" :key="index2" @click="toPage(citem)">
            <i class="index">{{index2+1}}</i>
            <i class="icon iconfont icon-zixun2"></i>
            <p class="tit">{{citem.name}}{{citem.issue}}</p>
            <span class="date">{{citem.pubdate}}</span>
          </li>
        </ul>
      </div>
    </template>
    <!-- no-data -->
    <div v-else class="no-data">
      <loading1 :emptyText="emptyText"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ipi: 1,
      ips: 10,
      info: {
        title: '',
        issue: '',
        logo: '',
        content: []
      },
      emptyText: 'loading'
    }
  },
  methods: {
    init(data) {
      this.getReportData(data)
    },
    getReportData(data) {
      let ths = this
      this.emptyText = 'loading'
      let result =  data.result
      if (data['source'] && data['source'].length > 0) {
        this.$set(this.info, 'title', data.source[0]['key'])
        this.$set(this.info, 'issue', data.source[0]['doc_count'])
      }
      let imageUrlArr = result.filter(v => v.image_url)
      if (imageUrlArr.length > 0) {
        this.getImageUrl(imageUrlArr[0].image_url, d => {
          ths.$set(ths.info, 'logo', d)
        })
      } else {
        ths.$set(ths.info, 'logo', require('@/assets/img/report/u3712.png'))
      }
      this.$set(this.info, 'content', result || [])
      if (result.length <= 0) {
        this.emptyText = '暂无'
      }
    },
    // 封面
    getImageUrl(image_url, func) {
      if (image_url.indexOf('.') > -1) {
        this.$axios({
          method: 'get',
          url: this.$Url.report.download2,
          params: {
            filename: image_url,
            bucketName: 'gdt-bucket'
          },
          responseType: 'blob'
        }).then(res => {
          let blob = new Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          func && func(url)
        }).catch(err => {
          func && func(require('@/assets/img/report/u3712.png'))
        })
      } else {
        func && func(require('@/assets/img/report/u3712.png'))
      }
    },
    toPage(citem) {
      let obj = {
        page: 'detail',
        esId: citem.esId,
        source: citem.source,
        year: moment(citem.pubdate).format('YYYY')
      }
      this.$router.push({
        name: this.$route.name,
        params: {
          id: encodeURIComponent(JSON.stringify(obj))
        }
      })
    }
  },
  watch: {
    '$route'() {
      if (this.$route.params && this.$route.params.id) {
      }
    }
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.article {
  position: relative;
  width: 100%;
  border-radius: 6px;
  background-color: $color2;
  h4 {
    line-height: .4rem;
    padding: 0 .2rem;
    border-bottom: 1px solid $color102;
    font-size: .16rem;
    text-decoration: underline;
    color: $color118;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content {
    position: relative;
    display: flex;
    width: 100%;
    padding: .2rem .4rem;
    .logo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2.3rem;
      margin-right: .6rem;
      // background-color: $color115;
      img {
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      }
    }
    .info-box {
      position: relative;
      width: calc(100% - 2rem - .9rem);
      li {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: .3rem;
        .index {
          width: .3rem;
          height: .24rem;
          line-height: .24rem;
          margin-right: .14rem;
          font-size: .18rem;
          text-align: center;
          color: $color120;
          background-color: rgba(255, 153, 0, .2);
        }
        .icon {
          width: .34rem;
          line-height: .24rem;
          font-size: .23rem;
          color: $color117;
        }
        .tit {
          max-width: calc(100% - .24rem - .14rem - .3rem - .14rem - 1.1rem);
          margin-right: .14rem;
          font-size: .18rem;
          cursor: pointer;
          text-align: left;
          text-decoration: underline;
          color: $color117;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .date {
          width: 1.15rem;
          border: 1px solid $color116;
          margin-right: .1rem;
          font-size: .15rem;
          text-align: center;
          color: $color116;
        }
      }
    }
  }
  .no-data {
    line-height: 1.5rem;
  }
}
</style>